<template>
    <div id="goal">
        <div class="top">
            <div class="tit">如果做不到,我就</div>
            <input type="text" placeholder="在下面选择一个或输入一个（10字内）" maxlength="10" v-model="goal">
        </div>

        <div class="tagList">
            <div :class="{'tagSelect':index==goalIndex}" class="tag" v-for="(item,index) of listData" :key="index" @click="selectItem(item,index)">{{item}}</div>
        </div>

        <div class="btn-wrapper">
            <div class="btn" @click="toPoster">就这么定了</div>
        </div>
    </div>
</template>
<script>
import { Toast,Dialog } from 'vant';
export default {
    name:'goal',
    data() {
        return {
            goalIndex:-1,
            goal:'',
            listData:[
                '生成芥末酱并发朋友圈',
                '把头像换成猪头一个月',
                '直播吃翔',
                '舔脚拍照发朋友圈',
                '头发染成绿色',
                '卸载游戏',
                '一年不喝奶茶',
                '素颜逛街',
                '鬼脸丑照做头像一个月',
                '抄一遍新华字典',
                '裸奔一公里',
                '剃光头'
            ]
        }
    },
    methods: {
        selectItem(item,index){
            this.goal=item;
            this.goalIndex=index
        },
        async toPoster(){
            if(!this.goal){
                Toast('请先填写你的决心');
                return
            }
         let judge=await   Dialog.confirm({
            title:'确认今年的flag',
            message: '今年的flag立好了吗？'
            }).then(() => {
            // on confirm
                return true
            }).catch(() => {
            // on cancel
                return false
            });
            if(judge){

            }
            this.$bus.$data.goal=this.goal;
            this.$router.push('Poster')
        },
    },
}
</script>
<style lang="scss" scoped>
    .top{
        padding:0 20px;
        font-size: 30px;
        line-height: 30px;
        text-align: left;
        .tit{
            padding:20px 0;
        }
        input{
            padding:10px 0;
            font-size: 30px;
            line-height: 30px;
            border:none;
            border-bottom: 4px solid #eee;
            width:100%;
        }
    }

    //选项
    .tagList{
        display: flex;
        flex-wrap: wrap;
        margin-top:20px;
        // justify-content: space-around;
        .tag{
            margin:10px 20px;
            border-radius: 10px;
            border:2px solid #eee;
            padding:10px 30px;
        }
        .tagSelect{
            color:#fff;
            background-color: #d23e3d
        }
    }

    .btn-wrapper{
        .btn{
            font-size: 40px;
            padding:20px 40px;
            color:#fff;
            width:300px;
            border-radius: 30px;
            margin:100px auto 0;
            background-color: #d23e3d
        }
    }
</style>